<template>
    <div class="live">
        <div class="live-head-info clear">
            <div class="crumbs-link fl">
                <em @click="goback()">排课列表</em>
                <strong>
                    <i>></i>{{name}}</strong>
            </div>
        </div>
        <div class="live-video-wp clear">
            <div class="live-video">
                <video-player class="video-player vjs-custom-skin maxW train-video-player" id="videoPlayer" ref="videoPlayer" :playsinline="true" :options="playerOptions" @play="onPlayerPlay($event)"></video-player>
            </div>
        </div>
        <div class="train-vide-taps maxW clear">
            <div class="train-vide-taps-l fl">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="评分评论" name="1">
                        <div class="train-video-comment">
                            <div class="train-video-comment-h clear">
                                <span>{{comment_sum}}条评分</span>
                                <el-button type="primary" v-if="rating_btns_visible" @click="ratingView()">评分评论</el-button>
                            </div>
                            <ul>
                                <li class="train-video-comment-list clear" v-for="(item,index) in ratingReviewData" :key="index">
                                    <div class="train-video-comment-list-l fl">
                                        <img src="../../../../public/images/Group9.png" alt="">
                                    </div>
                                    <div class="train-video-comment-list-r">
                                        <div class="train-video-comment-list-r-1 clear">
                                            <span>{{item.user_name}}</span>
                                            <span>
                                                <em>{{item.score}}分</em>
                                            </span>
                                            <span @click="finerScore(item)">细项评分</span>
                                            <div class="fr" v-if="parseInt(item.user_id) === $store.getters.userInfo.id">
                                                <i class="score_btn editScore_btn" @click="getCommentPre(item)"></i>
                                                <i class="score_btn delScore_btn" @click="delScore(item)"></i>
                                                <span>{{item.create_time}}</span>
                                            </div>
                                        </div>
                                        <div class="train-video-comment-list-r-2">
                                            <span>{{item.content}}</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                            <div class="excellent-page">
                                <el-pagination v-if="comment_sum>10" background class="pageing" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParam.page_index" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="listParam.page_size" layout="total, sizes, prev, pager, next, jumper" :total="comment_sum">
                                </el-pagination>
                            </div>
                            <div class="dependent" v-if="ratingReviewData.length===0">
                                <i class="ipng image_state01"></i>
                                <p>还没发现任何相关的内容哦~</p>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="课程介绍" name="2">
                        <div class="train-vide-introduce">

                            <ul>
                                <li class="train-video-introduce-txt clear">
                                    <span>课程分类</span>
                                    <div>
                                        <span>{{courseData.school_name}}>{{courseData.grade_name}} >{{courseData.subject_name}} </span>
                                    </div>
                                </li>
                                <li class="train-video-introduce-txt clear">
                                    <span>课型</span>
                                    <div>
                                        <span v-text="addTeachingType(courseData.teaching_type)"></span>
                                    </div>
                                </li>
                                <li class="train-video-introduce-txt clear">
                                    <span>课程简介</span>
                                    <div>
                                        <span>{{courseData.profile}}</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="讲师介绍" name="3">
                        <div class="train-vide-introduce">
                            <ul>
                                <li class="train-video-introduce-txt clear">
                                    <span>老师信息</span>
                                    <div class="clear train-video-teacher">
                                        <div class="train-video-teacher-img fl">
                                            <img v-if="teacherProfileData.avatar_path" :src="this.BASE_URL+teacherProfileData.avatar_path">
                                            <img v-else src="./../../../../public/images/Group9.png">
                                        </div>
                                        <div class="train-video-teacher-txt">
                                            <a href="javascript:void(0);">{{teacherProfileData.name}}</a>
                                            <p>{{teacherProfileData.platform_name}}-{{teacherProfileData.org_names}} - {{teacherProfileData.subject_name}}</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="train-video-introduce-txt clear">
                                    <span>老师简介</span>
                                    <div>
                                        <span>{{teacherProfileData.profile}}</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div class="train-vide-taps-r">
                <h3>资料下载</h3>
                <div class="train-vide-taps-r-download">
                    <ul>
                        <li class="train-vide-download clear" v-for="(item,index) in resourceData" :key="index">
                            <img v-if="item.file_type==1" src="../../../../public/images/format/resourceicon1.png" alt="文档">
                            <img v-else-if="item.file_type==2" src="../../../../public/images/format/resourceicon2.png" alt="日志">
                            <img v-else-if="item.file_type==3" src="../../../../public/images/format/resourceicon3.png" alt="图片">
                            <img v-else-if="item.file_type==4" src="../../../../public/images/format/resourceicon4.png" alt="压缩文件">
                            <img v-else-if="item.file_type==5" src="../../../../public/images/format/resourceicon5.png" alt="音乐">
                            <img v-else-if="item.file_type==6" src="../../../../public/images/format/resourceicon6.png" alt="视频">
                            <img v-else-if="item.file_type==7" src="../../../../public/images/format/resourceicon7.png" alt="应用程序">
                            <img v-else-if="item.file_type==8" src="../../../../public/images/format/resourceicon8.png" alt="其他">
                            <span :title="item.name+'.'+item.postfix"> {{item.name}}.{{item.postfix}}</span>
                            <el-button @click="down(item)" type="text">下载</el-button>
                        </li>
                    </ul>
                    <div class="placeholder-v" v-if="placeholder">
                        <i class="ipng couse01"></i>
                        <span>还没有发现任何资料</span>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="评分评论" :visible.sync="ratingReview" width="800px" custom-class="visible" :close-on-click-modal="false" @close='closeRatingDialog'>
            <div class="ratingReview">
                <div class="ratingReview-h clear">
                    <span>制定人：{{scale_data.user_name}}</span>
                    <div class="fr">
                        <span>满分：
                            <i>{{scale_data.total_score}}</i>
                        </span>
                        <span>评分：
                            <i>{{score}}</i>
                        </span>
                    </div>
                </div>
                <el-form label-width="0" class="ratingReview-dome">
                    <div class="ratingReview-b">
                        <table>
                            <thead>
                                <tr>
                                    <th style="width:20%">项目</th>
                                    <th style="width:40%">评价内容</th>
                                    <th style="width:20%">最高</th>
                                    <th style="width:20%">分数</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template v-for="(item, index) in scale_data.info_data">
                                    <template v-for="(item2, index2) in item.children">
                                        <tr>
                                            <td :rowspan="item.children.length" v-if="index2===0">{{item.content}}</td>
                                            <td>
                                                <div class="itc-td">
                                                    {{item2.content}}
                                                </div>
                                            </td>
                                            <td>
                                                <div class="itc-td">
                                                    {{item2.score}}
                                                </div>
                                            </td>
                                            <td>
                                                <el-form-item class="itc-td video-rating-input">
                                                    <el-input-number :controls="false" :min="0" :max="parseInt(item2.score)" placeholder="请评分" v-model.number="info_data[index].children[index2].score" @blur="handleChange" :disabled="commentVisible===false">
                                                    </el-input-number>
                                                </el-form-item>
                                            </td>
                                        </tr>
                                    </template>
                                </template>
                            </tbody>
                        </table>
                    </div>
                    <el-form-item>
                        <el-input type="textarea" :rows="5" resize="none" maxlength="140" placeholder="快来点评一下吧，大胆想说出你的想法~~" v-model.trim="comment">
                        </el-input>
                        <span class="word-sum">
                            <i>{{comment.length}}</i>/140</span>
                    </el-form-item>
                    <el-form-item class="buttonCSS">
                        <el-button @click="resetForm" plain>取消</el-button>
                        <el-button type="primary" @click="submitForm">确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <el-dialog title="细项评分" :center="false" :visible.sync="ratingVisible" width="800px" custom-class="visible" :close-on-click-modal="false" @close='closeRatingDialog'>
            <div class="ratingReview">
                <div class="ratingReview-h clear">
                    <span>制定人：{{scale_data.create_name}}</span>
                    <div class="fr">
                        <span>满分：
                            <i>{{scale_data.total_score}}</i>
                        </span>
                        <span>评分：
                            <i>{{score}}</i>
                        </span>
                    </div>
                </div>
                <el-form label-width="0" class="ratingReview-dome">
                    <div class="ratingReview-b">
                        <table>
                            <thead>
                                <tr>
                                    <th style="width:20%">项目</th>
                                    <th style="width:40%">评价内容</th>
                                    <th style="width:20%">最高</th>
                                    <th style="width:20%">分数</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template v-for="(item, index) in scale_data.info_data">
                                    <template v-for="(item2, index2) in item.children">
                                        <tr>
                                            <td :rowspan="item.children.length" v-if="index2===0">{{item.content}}</td>
                                            <td>
                                                <div class="itc-td">
                                                    {{item2.content}}
                                                </div>
                                            </td>
                                            <td>
                                                <div class="itc-td">
                                                    {{item2.score}}
                                                </div>
                                            </td>
                                            <td>
                                                <el-form-item class="itc-td video-rating-input">
                                                    <span>{{item2.receive_score}}</span>
                                                </el-form-item>
                                            </td>
                                        </tr>
                                    </template>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
// import "videojs-flash";
import "video.js/dist/lang/zh-CN";
// import SWF_URL from 'videojs-swf/dist/video-js.swf';

export default {
    data() {
        return {
            activeName2: "1",
            activeName: "1",
            switch_val: false,
            playerOptions: {
                loop: false,
                height: "360",
                language: "zh-CN",
                sources: [
                    {
                        type: "application/x-mpegURL",
                        src: "blala"
                    }
                ],
        // flash: {swf: SWF_URL },
                // techOrder: ["flash"],
                autoplay: false,
                controls: true,
                poster: "",
                controlBar: {
                    timeDivider: true,
                    durationDisplay: true,
                    remainingTimeDisplay: false,
                    fullscreenToggle: true //全屏按钮
                }
            },
            chat_val: "",
            placeholder: true,
            ratingReview: false,
            ratingVisible: false,
            ratingForm: {
                score: [5, 6]
            },
            schedule_id: this.$route.query.id,
            name: this.$route.query.name,
            courseData: [], //课程介绍
            teacher_id: "",
            teacherProfileData: [], // 教师简介
            ratingReviewData: [], // 资料下载
            resourceData: [], // 评分评论列表
            rating_btns_visible: false,
            comment_sum: 0, //评论条数
            listParam: {
                schedule_id: this.$route.query.id,
                page_index: 1,
                page_size: 10
            },
            comment: "", //评分评论的评论内容
            info_data: [], //评分数据
            scale_data: [], //量表数据
            commentVisible: true,
            score: 0, //评分总分,
            temp_info_data: [],
            user_id: this.$store.getters.userInfo.id,
            chatData: [],
            onlineNnum: 0,
            allUserId: [],
            checkEndTimeout: null, //检查直播时间定时器
            delLiveTimeout: null //检查直播是否被后台删除
        };
    },
    created() {
        this.getScheduleInfo(); //课程介绍
        this.getReviewList(); //评分评论列表
        this.getResourse(); //资源下载
        this.getComment();
    },
    mounted() {
        this.delLiveTimeout = setInterval(() => {
            this.liveIsDel();
        }, 5000);
    },
    beforeDestroy() {
        //this.over()
        clearInterval(this.checkEndTimeout);
        clearInterval(this.delLiveTimeout);
    },
    methods: {
        onPlayerPlay() {
            var normal_currentTime = this.$refs.videoPlayer.player.currentTime();
            setTimeout(() => {
                var unnormal_currentTime = this.$refs.videoPlayer.player.currentTime();
                if (
                    normal_currentTime.toString() ==
                    unnormal_currentTime.toString()
                ) {
                    this.$refs.videoPlayer.player.pause();
                    this.$refs.videoPlayer.player.play();
                }
            }, 300);
        },
        gatewaywork() {
            let webSocketChatURL = sessionStorage.getItem("ws_teaching_url");
            this.ws = new WebSocket(webSocketChatURL);
            this.ws.onopen = () => {
                var message = JSON.stringify({
                    type: "login",
                    uid: this.$store.getters.userInfo.id,
                    room_id: "teaching_" + this.schedule_id
                });
                this.ws.send(message);
                // Web Socket 已连接上，使用 send() 方法发送数据
                console.log("已连接上...,发送身份信息：" + message);
            };
            this.ws.onmessage = evt => {
                var data = JSON.parse(evt.data);
                if (data.status == "success") {
                    var type = data.type;
                    var data = data.data;
                    if (type == "receive") {
                        this.chatData.push(data.data);
                    } else if (type == "all_count") {
                        this.onlineNnum = data.num;
                    } else {
                        //allUserId
                    }
                }

                console.log("数据已接收...:", data);
            };
            this.ws.onclose = function() {
                // 关闭 websocket
                console.log("连接已关闭...");
            };
            // // 组件销毁时调用，中断websocket链接
            // this.over = () => {
            //  this.ws.close()
            // }
        },
        // 获取排课详情
        //课程介绍
        liveIsDel() {
            let success = data => {
                if (is_empty(data.data)) {
                    this.$message.warning("该直播已被删除");
                    setTimeout(() => {
                        this.$router.push("/course2");
                    }, 1000);
                    return false;
                }
            };
            this.$ajax({
                url: "api/teachingschedule/schedule_info",
                method: "get",
                params: {
                    id: this.$route.query.id
                },
                func: {
                    success: success
                }
            });
        },
        getScheduleInfo() {
            let success = data => {
                this.courseData = data.data;
                this.teacher_id = data.data.create_id;
                let jummp = false;
                if (parseInt(this.courseData.live_status) === 1) {
                    jummp = true;
                    this.$message.warning("该直播还未开始哦");
                } else if (parseInt(this.courseData.live_status) === 3) {
                    jummp = true;
                    this.$message.warning("该直播已经结束啦");
                }
                if (jummp) {
                    setTimeout(() => {
                        this.$router.push("/course2");
                    }, 1000);
                    return false;
                }
                this.checkEND();
                this.$refs.videoPlayer.player.src({
                    type: "rtmp/mp4",
                    src: this.courseData.rtmp
                });
                setTimeout(() => {
                    this.$refs.videoPlayer.player.play();
                }, 1500);
                this.getTeacherProfile();
                //this.gatewaywork();
            };
            this.$ajax({
                url: "api/teachingschedule/schedule_info",
                method: "get",
                params: {
                    id: this.$route.query.id
                },
                func: {
                    success: success
                }
            });
        },
        //检查直播是否结束
        checkEND() {
            this.checkEndTimeout = setInterval(() => {
                this.courseData.server_timestamp =
                    this.courseData.server_timestamp + 1;
                if (
                    this.courseData.server_timestamp >=
                    this.courseData.end_time_s
                ) {
                    this.$message.warning("直播结束啦");
                    clearInterval(this.checkEndTimeout);
                    setTimeout(() => {
                        this.$router.push("/course2");
                    }, 1000);
                }
            }, 1000);
        },
        addTeachingType(teaching_type) {
            switch (teaching_type) {
                case 1:
                    return "新授课";
                case 2:
                    return "复习课";
                case 3:
                    return "评讲课";
                case 4:
                    return "主题活动课";
            }
        },
        // 教师简介
        getTeacherProfile() {
            let success = data => {
                this.teacherProfileData = data.data;
                // console.log(this.teacherProfileData);
            };
            this.$ajax({
                url: "api/teachingschedule/teacher_profile",
                method: "get",
                params: {
                    schedule_id: this.schedule_id,
                    teacher_id: this.teacher_id
                },
                func: {
                    success: success
                }
            });
        },
        // 获取资料
        getResourse() {
            let success = data => {
                this.resourceData = data.data;
                // console.log(this.resourceData);
                this.resourceData.length === 0
                    ? (this.placeholder = true)
                    : (this.placeholder = false);
            };
            this.$ajax({
                url: "api/teachingschedule/teaching_schedule_resource",
                method: "get",
                params: {
                    schedule_id: this.schedule_id
                },
                func: {
                    success: success
                }
            });
        },
        // 下载资料
        down(obj) {
            var form = document.createElement("form");
            var type = 1;
            form.action =
                this.BASE_URL +
                "/index/resource/teaching_schedule_resource_download";
            form.method = "post";
            form.style.display = "none";
            var opt_id = document.createElement("textarea");
            opt_id.name = "id";
            opt_id.value = obj.id;
            form.appendChild(opt_id);
            var opt_type = document.createElement("textarea");
            opt_type.name = "type";
            opt_type.value = type;
            form.appendChild(opt_type);
            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);
        },
        //获取单个评课的评论列表
        getReviewList() {
            let success = data => {
                this.ratingReviewData = data.data.data;
                this.comment_sum = data.data.data_sum;
            };
            this.$ajax({
                url: "api/teachingschedule/schedule_comment_list",
                method: "get",
                params: this.listParam,
                func: {
                    success: success
                }
            });
        },
        // 评分评论按钮（新增）
        ratingView() {
            let success = data => {
                this.info_data = [];
                this.comment = "";
                this.scale_data = data.data;
                for (var i = 0; i < data.data.info_data.length; i++) {
                    var parent_push_data = {
                        scale_info_id: data.data.info_data[i].id,
                        score: 0,
                        children: []
                    };
                    if (data.data.info_data[i].children.length > 0) {
                        for (
                            var j = 0;
                            j < data.data.info_data[i].children.length;
                            j++
                        ) {
                            var push_data = {
                                scale_info_id:
                                    data.data.info_data[i].children[j].id,
                                score: 0
                            };
                            parent_push_data.children.push(push_data);
                        }
                    }
                    this.info_data.push(parent_push_data);
                }
                this.ratingReview = true;
            };
            let fail = data => {
                this.$message.error(data.msg);
            };
            // 获取评课关联的评级量表
            this.$ajax.get("api/teachingschedule/schedule_scale_bind", {
                params: { schedule_id: this.schedule_id },
                func: { success: success, fail: fail }
            });
        },
        // 设置评分后计算总分
        handleChange() {
            this.score = 0;
            for (var i = this.info_data.length - 1; i >= 0; i--) {
                if (this.info_data[i].children.length > 0) {
                    this.info_data[i].score = 0;
                    var score_column = getOneColumn(
                        this.info_data[i].children,
                        "score"
                    );
                    for (var j = score_column.length - 1; j >= 0; j--) {
                        this.info_data[i].score += parseInt(score_column[j]);
                        this.score += parseInt(score_column[j]);
                    }
                }
            }
        },
        //关闭弹窗清空
        closeRatingDialog() {
            this.ratingReview = false;
            this.ratingVisible = false;
            // this.comment = "";
            this.score = 0;
            // this.info_data = [];
        },
        // 保存用户对单个排课评课的评分评论
        keepReview() {
            let success = data => {
                this.$message.success(data.msg);
                this.reviewVisible = false;
                this.getReviewList();
                this.rating_btns_visible = false;
            };
            this.$ajax({
                url: "api/teachingschedule/user_scale_info",
                method: "post",
                params: {
                    id: this.schedule_id,
                    comment: this.comment,
                    info_data: JSON.stringify(this.info_data)
                },
                func: {
                    success: success
                }
            });
        },
        submitForm() {
            if (this.score == 0) {
                this.$message.error("请输入符合量表的分数！");
            } else {
                this.keepReview();
                this.ratingReview = false;
            }
        },
        resetForm() {
            this.ratingReview = false;
        },
        // 细项评分按钮
        finerScore(obj) {
            console.info(obj);
            this.ratingVisible = true;
            let success = data => {
                this.scale_data = data.data;
                this.score = 0;
                this.info_data = data.data.info_data;
                for (var i = this.info_data.length - 1; i >= 0; i--) {
                    if (this.info_data[i].children.length > 0) {
                        for (
                            var j = this.info_data[i].children.length - 1;
                            j >= 0;
                            j--
                        ) {
                            this.score += parseInt(
                                this.info_data[i].children[j].receive_score
                            );
                        }
                    }
                }
            };
            let fail = data => {
                this.$message.error(data.msg);
            };
            this.$ajax.get("api/teachingschedule/user_scale_info", {
                params: { id: this.schedule_id, user_id: obj.user_id },
                func: { success: success, fail: fail }
            });
        },
        // 获取用户对单个评课排课的评分评论
        getComment() {
            let success = data => {
                this.rating_btns_visible = is_empty(data.data.info_data)
                    ? true
                    : false;
            };
            this.$ajax({
                url: "api/teachingschedule/user_scale_info",
                method: "get",
                params: {
                    id: this.schedule_id
                },
                func: {
                    success: success
                }
            });
        },
        getCommentPre() {
            let success = data => {
                this.score = 0;
                this.comment = data.data.comment;
                this.comment_id = data.data.id;
                var i_data = data.data.info_data;
                this.temp_info_data = [];
                if (i_data.length > 0) {
                    for (let i = 0; i < i_data.length; i++) {
                        this.temp_info_data.push(i_data[i]);
                        if (
                            !is_empty(i_data[i].children) &&
                            i_data[i].children.length > 0
                        ) {
                            for (
                                let j = 0;
                                j < i_data[i].children.length;
                                j++
                            ) {
                                this.score += parseInt(
                                    i_data[i].children[j].receive_score
                                );
                                this.temp_info_data.push(i_data[i].children[j]);
                            }
                        }
                    }
                }
                this.editScore();
            };
            this.$ajax({
                url: "api/teachingschedule/user_scale_info",
                method: "get",
                params: {
                    id: this.schedule_id
                },
                func: {
                    success: success
                }
            });
        },
        // 编辑评分
        editScore() {
            let success = data => {
                this.scale_data = data.data;
                this.info_data = [];
                var ids = getOneColumn(this.temp_info_data, "id");
                console.info(this.temp_info_data);
                for (var i = 0; i < data.data.info_data.length; i++) {
                    var inx = ids.indexOf(data.data.info_data[i].id);
                    var re_score =
                        inx > -1
                            ? parseInt(this.temp_info_data[inx].receive_score)
                            : 0;
                    var parent_push_data = {
                        scale_info_id: data.data.info_data[i].id,
                        score: re_score,
                        children: []
                    };
                    if (data.data.info_data[i].children.length > 0) {
                        for (
                            var j = 0;
                            j < data.data.info_data[i].children.length;
                            j++
                        ) {
                            var inx = ids.indexOf(
                                data.data.info_data[i].children[j].id
                            );
                            var re_score =
                                inx > -1
                                    ? parseInt(
                                          this.temp_info_data[inx].receive_score
                                      )
                                    : 0;
                            var push_data = {
                                scale_info_id:
                                    data.data.info_data[i].children[j].id,
                                score: re_score
                            };
                            parent_push_data.children.push(push_data);
                        }
                    }
                    this.info_data.push(parent_push_data);
                }
                this.ratingReview = true;
            };
            let fail = data => {
                this.$message.error(data.msg);
            };
            this.$ajax.get("api/teachingschedule/schedule_scale_bind", {
                params: { schedule_id: this.schedule_id },
                func: { success: success, fail: fail }
            });
        },
        // 删除评分
        delScore(obj) {
            let yes = data => {
                let success = data => {
                    this.$message.success(data.msg);
                    this.getReviewList();
                    this.getComment();
                    this.rating_btns_visible = true;
                };
                this.$ajax({
                    url: "api/teachingschedule/user_scale_info",
                    method: "delete",
                    params: {
                        schedule_id: obj.schedule_id,
                        comment_id: obj.id
                    },
                    func: {
                        success: success
                    }
                });
            };
            let cancel = data => {};
            this.e_confirm({
                yes: yes,
                cancel: cancel,
                txt: "确定删除您的评论吗？"
            });
        },
        goback() {
            this.$router.back(-1);
        },
        //分页
        handleSizeChange(val) {
            this.listParam.page_index = 1;
            this.listParam.page_size = val;
            this.getReviewList();
        },
        handleCurrentChange(val) {
            this.listParam.page_index = val;
            this.getReviewList();
        }
    }
};
</script>
<style lang="scss">
.live-video-wp {
    margin: 0;
}
.live-video {
    margin-right: 0 !important;
    background-image: url("../../../assets/images/bgc.png") !important;
}

.vjs-custom-skin > .video-js .vjs-big-play-button {
    border-radius: 0.3em !important;
}
.live {
    .train-video-comment-list-r-1 {
        line-height: 31px;
        .score_btn {
            display: none;
            width: 20px;
            height: 20px;
            background-image: url(../../../assets/images/ipng.png);
            background-repeat: no-repeat;
            margin-right: 10px;
        }
        .editScore_btn {
            background-position: -650px -632px;
        }
        .delScore_btn {
            background-position: -560px -632px;
        }
    }
    .train-video-comment-list-r:hover {
        .score_btn {
            display: inline-block;
        }
    }

    .collect_btn {
        display: inline-block;
        width: 16px;
        height: 14px;
        background-image: url(../../../assets/images/ipng.png);
        background-repeat: no-repeat;
        margin-left: 8px;
        cursor: pointer;
    }
    .alr_collect {
        background-position: -470px -782px;
    }
    .un_collect {
        background-position: -418px -782px;
    }
    .ratingReview-dome {
        td {
            .itc-td {
                border-bottom: 1px solid rgba(224, 224, 224, 0.6);
                word-break: break-all;
                word-wrap: break-word;
            }
            .itc-td:nth-last-child(1) {
                border-bottom: 1px solid transparent;
            }
        }
    }
}
</style>

